<template>
	<div class="ariceSwiper">
		<h1>文章轮播图</h1>
		<el-row class="addBtn clear_fix">
		<!--添加按钮-->
			<el-button class="addImg" type="primary" @click="dialogFormVisible = true">新增文章轮播图</el-button>
		</el-row>
	<!--首页头部-->
	<el-table :data="tableData">
	    <el-table-column label="图片">
	      <template slot-scope="scope">
	        <span style="margin-left: 10px">
	        	<div class="indImg"><img :src="scope.row.img_url"/></div>
	        </span>
	      </template>
	    </el-table-column>
	    <el-table-column label="操作">
	      <template class="el-table__row" slot-scope="scope">
	        <el-button
	          size="medium"
	          @click="handleUp(scope.$index, scope.row)">上升</el-button>
	        <el-button
	          size="medium"
	          @click="handleDown(scope.$index, scope.row)">下降</el-button>
	           <el-button
	          size="medium"
	          type="danger"
	          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      		</template>
    </el-table-column>
  </el-table>
  
  
  <!--弹窗-->
	  <el-dialog title="添加轮播图" :visible.sync="dialogFormVisible">
	  	<!--图片上传-->
	  	<div class="uploadBox">
	  	  <div class="upload">上传文件</div>
	      <el-upload
			  class="upload-demo"
			  ref="upload"
			  action=""
			  :file-list="fileList"
			  :auto-upload="false"
			  :on-change='changeUpload'>
			  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
			  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
			  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，每次只能上传一张,最大不超过5mb</div>
				<div  slot="tip" v-if="remin" class="remin">请选择背景图</div>
			</el-upload>
		</div>
		<!--单选框-->
	  <div slot="footer" class="dialog-footer swiperBtn">
	    <el-button type="primary" @click="subBtn">立即提交</el-button>
	  </div>
  </el-dialog>
  
</div>
</template>

<script>
	export default {
	    data() {
	      return {
			//表格数据
	        tableData: [],
        	dialogFormVisible: false,
	      	//单选框
	        radio:'1',
	        //实例化上传方法
	        updateImg:this.$config.uploadImg,
	        formData:new FormData(),
	        fileList:[],
	        
	        //上传图片路径
					imgUrl:"",
					//没上传图片提示
					remin:false
	        
		      }
		    },
	     methods: {
				 //成功提醒
					message(){
							this.$notify({
							title: '成功',
							message: '上传成功',
							type: 'success',
							duration:2000
						});
					},
					//失败提醒
					error(){
						this.$notify.error({
							title: '失败',
							message: '上传失败',
							duration:2000
						});
					},
					//提交成功
					succmsg(){
						this.$message({
							message: '提交成功',
							type: 'success'
						});
					},
		      //上传按钮
		      submitUpload() {
		        this.$require.post(this.$config.uploadImg,this.formData)
					.then((res)=>{
						this.$refs.upload.clearFiles();
						console.log(res)
						this.message();
						if(res.data.data.img_url!=undefined){
							this.imgUrl=res.data.data.img_url
						}else{
							this.imgUrl=res.data.data.img_url_array[res.data.data.img_url_array.length-1]
						}
						console.log(this.imgUrl)
					})
		      },
		      changeUpload(file,fileList){
		      		console.log(fileList)
		      		console.log(file.raw);
					this.formData.append("files",file.raw);
					
		      },
		      
		      //提交按钮
	      	  subBtn(){
							if(this.imgUrl!=""){
//									
									this.remin=false;
									this.$require.post(this.$config.newsCarousel,{
										img_url:this.imgUrl,
										order:0,
								})
								.then((res)=>{
									this.imgUrl="";
									this.succmsg();
									this.dialogFormVisible=false;
									this.getList()
								})
								.catch((err)=>{
									console.log("上传失败")
								})
							}else{
									this.remin=true
									this.error();
									return false;
							}
	      	  },
	      	  //请求数据
	      	 getList(){
	      	 	this.$require.get(this.$config1.newsCarousel)
		    		.then((res)=>{
		    			console.log(res)
		    			this.tableData=res.data.data.rows
		    			console.log(this.tableData)
		    		})
		    		.catch((err)=>{
		    			console.log("请求失败")
		    		})
	      	 },
	      	 
	      	 //操作
	      	 	//删除按钮
		      	 handleDelete(idx,row){
							 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示',{
									confirmButtonText: '确定',
									cancelButtonText: '取消',
									type: 'warning',
								
								}).then((res) => {
									// this.delid = id
									this.$message({
										type: 'success',
										message: '删除成功!',
									});
										this.$require.post(this.$config.delNewsCarousel,{
											id:row.id
										})
									.then((res)=>{
										this.getList()
										console.log(res)
									})
									
								})
								.catch(() => {
									this.$message({
										type: 'info',
										message: '已取消删除'
									})
									this.getList()
								});	
		      	 },
		      	 inpBtn(){
		      	 	this.getList()
		      	 },
		      	 //上升
			      handleUp(index, row) {
			        this.$require.post(this.$config.sortNewsCarousel,{
			      		move:1,
			      		orders:row.orders
			      	})
			      	.then((res)=>{
			      		this.getList()
			      	})
			      },
		      //下降
			      handleDown(index, row) {
			         this.$require.post(this.$config.sortNewsCarousel,{
			      		move:-1,
			      		orders:row.orders
			      	})
			      	.then((res)=>{
			      		this.getList()
			      	})
			      }
	      	 
		    },
    	created(){
    		//请求轮播图
    		this.getList()
    	},
    	
   	}
</script>

<style lang="scss" scoped>
	.ariceSwiper{
		margin: 20px auto 0px;
		/*width:%;*/
		height: 100%;
		padding: 0 30px;
		h1{
			font-size: 32px;
		}
	}
	.addBtn{
		margin-top: 20px;
	}
	.indImg{
		width:100px;
		// height: ;
		img{
			width: 100%;
		}
	}
	.addImg{
		float: left;
	}
	.selectType{
		float: right;
	}
	.el-dialog__title {
	    line-height: 30px;
	    font-size: 25px !important;
	    color: #303133;
	}
	.uploadBox{
		display: flex;
		align-content: flex-start;
		
	}
	.upload{
		width: 120px;
		display: inline-block;
		vertical-align: top;
		font-size: 14px;
		color: #606266;
		font-weight: 700;
	}
	.upload:before{
	    content: "*";
	    color: #f56c6c;
	    margin-right: 4px;
	}
	.upload-demo{
		display: inline-block;
		margin-bottom: 40px;
	}
	.urlBox{
		display: flex;
		align-items: center;
		align-content: space-between;
		margin-top: 20px;
	}
	.el-input{
		display: inline-block;
		width: 80%;
	}
	.swiperBtn {
		text-align: left ;
		margin-left: 120px;
	}
	.remin{
		line-height: 20px;
		font-size: 12px;
		color: #F56C6C;
	}
</style>